<template>
	<view>
		<uni-breadcrumb style="padding:15px;z-index:999">
			<uni-breadcrumb-item  v-for="(route,index) in routes" :clickable="true" :key="index">
			  <view style="color:#000;cursor:pointer;" @click.stop="breadcrumbClick($event,route)">
				{{route.groupName}}
			  </view>
			</uni-breadcrumb-item>
		</uni-breadcrumb>
		<view v-if="sibling.length > 0" v-show="showMenu" :style="'position:absolute;z-index:1000;left:'+menuLeft+'px;top:'+menuTop+'px;border:1px solid #ccc;background:#fff;padding:5px;'">
			 <uni-row class="demo-uni-row" v-for="(s,index) in sibling" :key="index" :title="s.groupName" >
				<uni-col style="padding:5px;">
					<view  @click="childClick(s)" class="demo-uni-col dark_deep" style="color:#333;cursor:pointer;">{{s.groupName}}</view>
				</uni-col>
			 </uni-row>
		</view>
	</view>
</template>
<script>
export default {
	name: "long-breadcrumb-menu",
	data() {
		return {
			showMenu:false,
			menuLeft:0,
			menuTop:0,
			sibling:[],
			routes:[{
						treeId:"",
						groupName:"根"
					}]
		}
	},
	props: {
		separator: {
			type: String,
			default: '/'
		},
		separatorClass: {
			type: String,
			default: ''
		},
		menuData:{
			type:Array,
			default:()=>{
				return []
			}
		},
		select:{
			type:Function
		}
	},
	created(){
		if( this.menuData != undefined && this.menuData.length > 0 ) {
			for( let i = 0 ; i < this.menuData.length; i++ ) {
				this.setParent(this.menuData[i]);
			}
		}
	},
	methods:{
		setParent(tree){
			if( tree.children != null && tree.children.length > 0 ) {
				for( let i = 0; i < tree.children.length; i++ ) {
					tree.children[i].pid  = tree.treeId;
					if( tree.children[i].children != undefined && tree.children[i].children.length > 0 ) {
						this.setParent(tree.children[i]);
					}
				}
			}
		},
		breadcrumbClick(e,item){
			if( this.showMenu ) {
				this.showMenu = false;
				return ;
			}
			this.menuTop = e.target.offsetTop+20;
			this.menuLeft = e.target.offsetLeft;
			this.showMenu = true;
			this.sibling.length = 0;
			this.getSlibling(this.menuData,item.treeId);
		},
		getSlibling(tree,treeId){
			if( treeId == undefined || treeId == null || treeId == "" ) {
				this.menuData.forEach(c=>{
					this.sibling.push(c);
				})
			}else {
				if( tree != undefined ) {
					tree.forEach(c=>{
						if( c.treeId == treeId ) {
							if( c.children != undefined && c.children.length > 0 ) {
								c.children.forEach(cc=>{
									this.sibling.push(cc);
								})
							}
						}else {
							if( c.children != undefined 
							&& c.children.length > 0 
							) {
								this.getSlibling(c.chidlren,c.treeId);
							}
						}
					})
				}
			}
		},
		findTreeItem(tree,id){
			for( let i = 0 ; i < tree.length; i++ ) {
				if( tree[i].treeId == id ) {
					let findItem = tree[i]
					return findItem;
				} else {
					if( tree[i].children != undefined && tree[i].children.length > 0 ) {
						let findItem = this.findTreeItem(tree[i].children,id);
						if( findItem ) {
							return findItem;
						}
					}
				}
			}
			return false;
		},
		pushParents(item){
			if( item.pid != undefined && item.pid != null && item.pid != "" ) {
				let parent = this.findTreeItem(this.menuData,item.pid);
				if( parent ) {
					this.pushParents(parent);
				}
			}
			this.routes.push(item);
		},
		childClick(item){
			this.routes = [{
				treeId:"",
				groupName:"根"
			}]
			this.pushParents(item);
			this.showMenu = false;
			if( this.select != undefined ) {
				this.select(item);
			}
		}
	}
}

</script>
<style lang="scss" scoped>
</style>